<template>
  <el-container class="Home-container">
    <!-- 左侧菜单栏 -->
    <el-aside :width="isCollapse ? '63px' : '200px'" class="container-left">
      <div class="menu-title">海晨忆管理系统</div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="activePath"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        :router="true"
      >
        <el-sub-menu :index="index + ''" v-for="(menu, index) in menuPermissionList" :key="menu.id">
          <template #title>
            <el-icon> <component :is="menu.icon"></component></el-icon>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item :index="subMenu.url" v-for="subMenu in menu.subMenuList">
            <el-icon> <component :is="subMenu.icon"></component></el-icon>
            {{ subMenu.name }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 右侧内容显示区域 -->
    <el-container class="container-right">
      <!-- 右侧顶部 -->
      <el-header class="container-right-header">
        <el-icon class="header-show-menu" @click="headerShowMenu">
          <Fold />
        </el-icon>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            {{ username }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 右侧主内容区域 -->
      <el-main class="container-right-main"><router-view></router-view></el-main>
      <!-- 右侧底部版权区域 -->
      <el-footer class="container-right-footer">@版权所有版权所有版权所有版权所有</el-footer>
    </el-container>
  </el-container>
</template>

<script setup lang="ts" name="Home">
import httpRequest from '@/http/httpRequest'
import { onMounted, onUnmounted, onUpdated, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
interface IMenuPermission {
  id: number | null
  icon: string
  name: string
  orderNo: number | null
  type: string
  url: string
  subMenuList: IMenuPermission[]
}
let isCollapse = ref(false)
let username = ref('')
let menuPermissionList = ref<IMenuPermission[]>([])
// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
const router = useRouter()
const route = useRoute()
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const headerShowMenu = () => {
  isCollapse.value = !isCollapse.value
}

let activePath = ref('')
onMounted(() => {
  activePath.value = route.fullPath
  httpRequest
    .doGet('/api/login/info', {})
    .then((res) => {
      if (res.data.code === 200) {
        username.value = res.data.data.name || ''
        menuPermissionList.value = res.data.data.menuPermissionList || []
        window.localStorage.setItem('buttonPermission', JSON.stringify(res.data.data))
      }
    })
    .catch((err) => {})
})

const logout = () => {
  httpRequest
    .doGet('/api/logout', {})
    .then((res) => {
      if (res.data.code == 200) {
        //清空登录态
        window.localStorage.removeItem('dlyk_login_token')
        window.localStorage.removeItem('buttonPermission')
        router.push({
          path: '/login',
        })
      } else {
        ElMessageBox.alert('退出登录失败，请稍后再试！', '退出登录', {
          // if you want to disable its autofocus
          // autofocus: false,
          confirmButtonText: 'OK',
          callback: (action: Action) => {},
        })
      }
    })
    .catch((error) => {})
}
</script>

<style scoped lang="scss">
.Home-container {
  width: 100%;
  height: calc(100vh);

  .container-left {
    background-color: black;

    .menu-title {
      color: #fff;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .container-right {
    .container-right-header {
      background-color: aqua;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-show-menu {
        cursor: pointer;
      }
    }

    .container-right-main {
      background-color: antiquewhite;
    }

    .container-right-footer {
      background-color: cadetblue;
      height: 48px;
      text-align: center;
      line-height: 48px;
    }
  }
}
</style>
